<template>
      <div id="prod">
            <div class="container">
                  <div class="bg">
                        <img src="../../assets/img/pbg.png" alt="">
                  </div>
                  <div class="title">
                        <div class="big">丰富多样的收银产品</div>
                        <div class="small">满足更多场景需求</div>
                  </div>

                  <div class="content">
                        <div class="tabcard">
                              <div class="list">
                                    <div class="item" :class="{'active': listShow == 'qt'}" @click="listShow = 'qt'">盈友蜻蜓</div>
                                    <div class="item" :class="{'active': listShow == 'qw'}" @click="listShow = 'qw'">盈友青蛙</div>
                                    <div class="item" :class="{'active': listShow == 'code'}" @click="listShow = 'code'">盈友二维码</div>
                                    <div class="item" :class="{'active': listShow == 'pay'}" @click="listShow = 'pay'">盈友收款王</div>
                                    <div class="item" :class="{'active': listShow == 'sao'}" @click="listShow = 'sao'">盈友扫码台</div>
                              </div>
                        </div>

                        <!-- inner -->
                        <div class="inner">
                              <!-- qingting -->
                              <div class="qt" v-if="listShow == 'qt'">
                                    <div class="left">
                                          <div class="imgbox">
                                                <img src="../../assets/img/prod.png" alt="">
                                          </div>
                                    </div>
                                    <div class="right">
                                          <div class="stitle">刷脸支付</div>
                                          <div class="inner">
                                                
                                                刷脸支付解决方案是以AI智能视觉算法为核心，对线下零
                                                售场景中的消费人群、商品、场景、终端等要素进行全方
                                                位的数字化升级，真正实现线下零售从数据采集、存储、
                                                分析到店铺智能化管理。
                        
                                          </div>
                                          <div class="iconinfo">
                                                <div class="item">
                                                      <div class="lefticon">
                                                            <div class="icon">
                                                                  <img src="../../assets/img/pic1.png" alt="">
                                                            </div>
                                                      </div>
                                                      <div class="rightinfo">
                                                            <div class="btxt">更精准</div>
                                                            <div class="txt">人脸识别+真人检测技术</div>
                                                      </div>
                                                </div>

                                                <div class="item">
                                                      <div class="lefticon">
                                                            <div class="icon">
                                                                  <img src="../../assets/img/pic2.png" alt="">
                                                            </div>
                                                      </div>
                                                      <div class="rightinfo">
                                                            <div class="btxt">更高效</div>
                                                            <div class="txt">商品、人脸快速识别</div>
                                                      </div>
                                                </div>

                                                <div class="item">
                                                      <div class="lefticon">
                                                            <div class="icon">
                                                                  <img src="../../assets/img/pic3.png" alt="">
                                                            </div>
                                                      </div>
                                                      <div class="rightinfo">
                                                            <div class="btxt">安全可靠</div>
                                                            <div class="txt">人脸识别+手机号双重认证</div>
                                                      </div>
                                                </div>
                                          </div>
                                    </div>
                              </div>

                              <!-- qingwa -->
                              <div class="qt" v-if="listShow == 'qw'">
                                    <div class="left">
                                          <div class="imgbox">
                                                <img src="../../assets/img/prod1.png" alt="">
                                          </div>
                                    </div>
                                    <div class="right">
                                          <div class="stitle">青蛙支付</div>
                                          <div class="inner">  
                                                让支付更加简单、配备3D结构光的摄像头模组一安全、稳
                                                      定，机型小巧、随放随用，L型的一体化设计机身占地面积
                                                      小，设计干争利落。体验度较好，用户较易接受配备丰富
                                                      的连接接口，支持连接多种外接设备，通过软件的升级让
                                                      设备不断作功能扩展和升级
                                          </div>
                                          <div class="iconinfo">
                                                <div class="item">
                                                      <div class="lefticon">
                                                            <div class="icon">
                                                                  <img src="../../assets/img/pic4.png" alt="">
                                                            </div>
                                                      </div>
                                                      <div class="rightinfo">
                                                            <div class="btxt">安全可靠</div>
                                                            
                                                      </div>
                                                </div>

                                                <div class="item">
                                                      <div class="lefticon">
                                                            <div class="icon">
                                                                  <img src="../../assets/img/pic5.png" alt="">
                                                            </div>
                                                      </div>
                                                      <div class="rightinfo">
                                                            <div class="btxt">稳定</div>
                                                            
                                                      </div>
                                                </div>
                                          </div>
                                    </div>
                              </div>
                              <!-- saoma -->
                              <div class="qt" v-if="listShow == 'code'">
                                    <div class="left">
                                          <div class="imgbox">
                                                <img src="../../assets/img/prod2.png" alt="">
                                          </div>
                                    </div>
                                    <div class="right">
                                          <div class="stitle">二维码支付</div>
                                          <div class="inner">  
                                                
                                          支付扫码付款，无需收银台，扫码枪等硬件 (需申请开通
                                                “扫码付”功能，获得“扫码付二维码”)输入消费金
                                                额，和收银员核对确认付款“扫码付”只要三步轻松搞
                                                定，支付就是这么简单
                                                      
                                          </div>
                                          <div class="iconinfo">
                                                <div class="item">
                                                      <div class="lefticon">
                                                            <div class="icon">
                                                                  <img src="../../assets/img/pic6.png" alt="">
                                                            </div>
                                                      </div>
                                                      <div class="rightinfo">
                                                            <div class="btxt">无需收银台</div>
                                                            
                                                      </div>
                                                </div>

                                                <div class="item">
                                                      <div class="lefticon">
                                                            <div class="icon">
                                                                  <img src="../../assets/img/pic7.png" alt="">
                                                            </div>
                                                      </div>
                                                      <div class="rightinfo">
                                                            <div class="btxt">扫码付</div>
                                                            
                                                      </div>
                                                </div>
                                          </div>
                                    </div>
                              </div>

                              <!--pay  -->
                              <div class="qt" v-if="listShow == 'pay'">
                                    <div class="left">
                                          <div class="imgbox">
                                                <img src="../../assets/img/prod3.png" alt="">
                                          </div>
                                    </div>
                                    <div class="right">
                                          <div class="stitle">收款王支付</div>
                                          <div class="inner">  
                                           
                                          即插即用安全稳定，多通道支付。
                                                专业技术团队开发维护系统，商超收银无需等待
                                                适用于学校食堂、单位食堂、快餐店等场景
                        
                                          </div>
                                          <div class="iconinfo">
                                                <div class="item">
                                                      <div class="lefticon">
                                                            <div class="icon">
                                                                  <img src="../../assets/img/pic8.png" alt="">
                                                            </div>
                                                      </div>
                                                      <div class="rightinfo">
                                                            <div class="btxt">食堂</div>
                                                            
                                                      </div>
                                                </div>

                                                <div class="item">
                                                      <div class="lefticon">
                                                            <div class="icon">
                                                                  <img src="../../assets/img/pic9.png" alt="">
                                                            </div>
                                                      </div>
                                                      <div class="rightinfo">
                                                            <div class="btxt">快餐</div>
                                                            
                                                      </div>
                                                </div>
                                                <div class="item">
                                                      <div class="lefticon">
                                                            <div class="icon">
                                                                  <img src="../../assets/img/pic10.png" alt="">
                                                            </div>
                                                      </div>
                                                      <div class="rightinfo">
                                                            <div class="btxt">专业技术团队</div>
                                                      </div>
                                                </div>
                                          </div>
                                    </div>
                              </div>
                              <!-- sao -->

                              <div class="qt" v-if="listShow == 'sao'">
                                    <div class="left">
                                          <div class="imgbox">
                                                <img src="../../assets/img/prod4.png" alt="">
                                          </div>
                                    </div>
                                    <div class="right">
                                          <div class="stitle">扫码台支付</div>
                                          <div class="inner">  
                                           
                                          即插即用 稳定性强支持系统windows/iOS/android/
                                                Liunx,颜而有实 提升支付体验45°人性化扫码角度，全
                                                铝合金外框，时尚美观支持微信/支付宝扫码收款，消费
                                                者出示付款码即可。支付限额动态扫码机制，告别支付
                                                限额。
                        
                                          </div>
                                          <div class="iconinfo">
                                                <div class="item">
                                                      <div class="lefticon">
                                                            <div class="icon">
                                                                  <img src="../../assets/img/pic11.png" alt="">
                                                            </div>
                                                      </div>
                                                      <div class="rightinfo">
                                                            <div class="btxt">Windows</div>
                                                            
                                                      </div>
                                                </div>

                                                <div class="item">
                                                      <div class="lefticon">
                                                            <div class="icon">
                                                                  <img src="../../assets/img/pic12.png" alt="">
                                                            </div>
                                                      </div>
                                                      <div class="rightinfo">
                                                            <div class="btxt">IOS</div>
                                                            
                                                      </div>
                                                </div>
                                                <div class="item">
                                                      <div class="lefticon">
                                                            <div class="icon">
                                                                  <img src="../../assets/img/pic13.png" alt="">
                                                            </div>
                                                      </div>
                                                      <div class="rightinfo">
                                                            <div class="btxt">Android</div>
                                                      </div>
                                                </div>
                                          </div>
                                    </div>
                              </div>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        listShow: "qt",
                  }
            },
      }
</script>

<style lang="scss" scoped>
.active {
      background-color: #1c9ff2;
      color: #fff;
}
#prod {
      width: 100%;
      max-width: 750px;
      margin-top: 0.3rem;
      .container {
            width: 100%;
            position: relative;
            left: 0;
            top: 0;
            .bg {
                  width: 100%;
                  height: 4.5rem;
                  overflow: hidden;
                  position: absolute;
                  z-index: -1;
                  left: 0;
                  top: 0;
                  img {
                        width: 100%;
                        height: 4.5rem; 
                  }
            }
            .title {
                  font-size: 0.36rem;
                  text-align: center;
                  color: #fff;
                  .small {
                        font-size: 0.24rem;
                  }
            }
            .content {
                  width: 7rem;
                  margin: 0.2rem auto;
                  border-radius: 0.3rem;
                  overflow: hidden;
                  background-color: #fff;
                  box-shadow: 0 0 3px #333;
                  .tabcard {
                        width: 100%;
                        
                        .list {
                              width: 100%;
                              display: flex;
                              font-size: 0.2rem;
                              border-bottom: 1px dashed #000;
                              .item {
                                    width: 1.4rem;
                                    height: 0.6rem;
                                    line-height: 0.6rem;
                                    text-align: center;
                              }
                        }
                  }
                  .inner {
                        width: 100%;
                        .qt {
                              width: 100%;
                              height: auto;
                              padding: 0.2rem;
                              font-size: 0.16rem;
                              display: flex;
                              align-items: center;
                              .left {
                                    width: 1.5rem;
                                    overflow: hidden;
                                    .imgbox {
                                          width: 1.5rem;
                                          height: 2.58rem;
                                          overflow: hidden;
                                          img {
                                                width: 1.5rem;
                                                height: 2.58rem;
                                          }
                                    }
                              }
                              .right {
                                    flex: 1;
                                    height: 100%;
                                    overflow: hidden;
                                    margin-left: 0.2rem;
                                    .stitle {
                                          font-size: 0.2rem;
                                    }
                                    .inner {
                                          margin: 0.1rem 0;
                                    }
                                    .iconinfo {
                                          display: flex;
                                          flex-wrap: wrap;
                                          font-size: 0.14rem;
                                          .item {
                                                display: flex;
                                                align-items: center;
                                                .rightinfo {
                                                      margin: 0.15rem 0.2rem;
                                                      .btxt {
                                                            font-size: 0.16rem;
                                                      }
                                                      .txt {
                                                            font-size: 0.14rem;
                                                      }
                                                }
                                                .lefticon {
                                                     .icon {
                                                           width: 0.34rem;
                                                           height: 0.34rem;
                                                           img {
                                                                 width: 0.34rem;
                                                                 height: 0.34rem;
                                                                 display: block;
                                                           }
                                                     } 
                                                }
                                          }
                                    }
                              }
                        }
                  }
            }
      }
}
</style>